<template>
  <el-dialog v-model="open" :title="title" width="800px" append-to-body :close-on-click-modal="false">
    <el-form :model="form" label-width="150px">
      <el-form-item label="主订单号">
        <span>
          {{ form.id }}
        </span>
      </el-form-item>
      <el-form-item v-if="form.projectName" label="项目">
        <span>
          {{ form.projectName }}
        </span>
      </el-form-item>
      <el-form-item v-if="form.orderDate" label="预订信息">
        <span>
          {{ form.orderDate }}  {{ form.orderTimePeriod.replace(/,/,'~') }}
        </span>
      </el-form-item>
      <el-form-item label="场地信息">
        <span>
          {{ form.siteName }}
        </span>
      </el-form-item>
      <el-form-item v-if="form.orderAmount&&form.orderType=='2'" label="价格">
        {{ form.orderAmount }}
      </el-form-item>
      <el-form-item v-if="form.sonList&&form.sonList.length>0" label="子订单详情">
        <el-descriptions v-for="s in form.sonList" border :column="2" style="margin-bottom: 15px;">
          <el-descriptions-item label="订单编号">{{ s.id }}</el-descriptions-item>
          <el-descriptions-item label="项目">{{ s.projectName }}</el-descriptions-item>
          <el-descriptions-item label="场地">{{ s.siteName }}</el-descriptions-item>
          <el-descriptions-item label="预订信息">{{ s.orderDate }} {{ s.orderTimePeriod.replace(/,/,'~') }}</el-descriptions-item>
        </el-descriptions>
      </el-form-item>
	  

    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button type="primary" :disabled="btnDisabled" @click="submitForm">{{ btnTitle }}</el-button>
        <el-button :disabled="btnDisabled" @click="cancel">取 消</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import { getCurrentInstance, reactive } from '@vue/runtime-core'
import { watch } from 'vue'
import { toRefs } from '@vueuse/shared'
import { unSubscribeOrder, backGetInfo } from '@/api/ven/reserve'

const { proxy } = getCurrentInstance()

const props = defineProps({
  props: {
    type: Object,
    default: () => ({
      open: false,
      data: {}
    })
  }
})
const emit = defineEmits(['submitForm'])

const data = reactive({
  form: {},
  title: '',
  btnTitle: '',
  rules: {

  },
  btnDisabled: false
})
const { open } = toRefs(props.props)
const { form, rules, btnDisabled, title, btnTitle } = toRefs(data)

watch(open, (val) => {
  if (val) {
    btnDisabled.value = false
    
    if (props.props.data.orderType == '2') {
      title.value = '预留退订'
      btnTitle.value = '批量退订'
    } else if (props.props.data.orderType == '3') {
      title.value = '批量解锁'
      btnTitle.value = '批量解锁'
    }
    backGetInfo(props.props.data.id).then(res => {
      // 获取父订单信息
      form.value = res.data
    })
  }
})

function submitForm() {
  proxy.$modal.confirm('确定退订').then(() => {
    unSubscribeOrder(form.value.id, {
      data: 0
    }).then(() => {
      btnDisabled.value = true
      proxy.$modal.msgSuccess('操作成功', () => {})
      open.value = false
      emit('submitForm')
    })
  })
}

function cancel() {
  open.value = false
}

</script>

<style scoped lang="scss">
</style>
